<script setup lang="ts">
import type { AppTypeProps } from '@/types';

import { defineEmits, ref } from 'vue';

import { Icon } from '@/components/core/icon';

import { ElButton } from 'element-plus';

import { useAppStore } from '@/store';

defineOptions({
  name: 'SystemTask',
});

const emit = defineEmits(['api']);
const app = ref<AppTypeProps>();
const appStore = useAppStore();
const selectApp = (item: AppTypeProps) => {
  app.value = item;
  Object.assign(app, item);
};
const closeApp = () => {
  if (app.value?.pid) {
    emit('api', {
      event: 'closeApp',
      pid: app.value?.pid,
    });
  }
};
</script>

<template>
  <div class="task">
    <div class="task-list">
      <template v-for="item in appStore.openAppList" :key="item.pid">
        <div
          :class="app && app.pid === item.pid ? 'active' : ''"
          class="task-item"
          @click="selectApp(item)"
        >
          <i
            v-if="item.iconType === 'icon'"
            :style="{
              backgroundColor: item.iconBgColor,
              background: item.iconBgImage,
              color: item.iconColor,
            }"
            class="iconfont"
          >
            <Icon :icon="item.icon" class="size-8" />
          </i>
          <i
            v-else
            :class="item.icon"
            :style="{
              backgroundColor: item.iconBgColor,
              backgroundImage: item.iconBgImage,
              color: item.iconColor,
            }"
            class="iconfont"
          ></i>
          <span class="task-name">{{ item.title }}</span>
        </div>
      </template>
    </div>
    <div class="task-ctrl">
      <ElButton
        :disabled="!app?.pid"
        size="small"
        type="primary"
        @click="closeApp"
      >
        强制退出
      </ElButton>
    </div>
  </div>
</template>
<style scoped lang="scss">
.task {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 350px;
  margin: 10px 20px;
  overflow: hidden;
  font-weight: 300;
  color: #333;
  text-shadow: none;

  .task-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;

    .task-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 8px 16px;
      margin: 2px 5px;
      font-size: 14px;
      cursor: pointer;
      border-radius: var(--radius);

      .task-name {
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
      }

      .iconfont {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: 10px;
        color: white;
        text-align: center;
        background: red;
        border-radius: 20%;
      }
    }

    .task-item:hover {
      color: white;
      background: rgb(75 158 251);
    }

    .active {
      color: white;
      background: rgb(75 158 251);
    }
  }

  .task-ctrl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    margin-top: 10px;
  }
}
</style>
